window.onload = () => {
    homeAnimationEntry();
    bindEventListener(2);
}

// 绑定事件监听器
function bindEventListener(sectionNumber) {
    let currentSectionNumber = 1;
    TweenMax.to('#progress-bar', 0.4, { width: `${currentSectionNumber / sectionNumber * 100}vw`, ease: Back.easeInOut })
    const homepageContainer = document.querySelector('.home-body');

    homepageContainer.addEventListener('wheel', debounce((event) => {
        event.preventDefault();
        const currentScrollLeft = homepageContainer.scrollLeft;
        const windowWidth = document.body.clientWidth;
        if (event.deltaY >= 10 && currentSectionNumber < sectionNumber) {
            TweenMax.to('.home-body', 1.6, { scrollLeft: currentScrollLeft + windowWidth, ease: Back.easeInOut, delay: 0.1 })
            currentSectionNumber += 1;
            TweenMax.to('#progress-bar', 0.8, { width: `${currentSectionNumber / sectionNumber * 100}vw`, ease: Back.easeInOut })
        } else if (currentSectionNumber > 1) {
            currentSectionNumber -= 1;
            TweenMax.to('.home-body', 1.6, { scrollLeft: currentScrollLeft - windowWidth, ease: Back.easeInOut, delay: 0.1 })
            TweenMax.to('#progress-bar', 0.8, { width: `${currentSectionNumber / sectionNumber * 100}vw`, ease: Back.easeInOut })
        }
    }))
}

function debounce(fn, duration = 800) {
    let timer = null;
    return function(...args) {
        if (timer != null) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, duration)
    }
}